<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" >
<style>
.spec {
	display: block;
	width: 150px;
	overflow: hidden; /*注意不要写在最后了*/
	white-space: nowrap;
	-o-text-overflow: ellipsis;
	text-overflow: ellipsis;
	height: 20px;
}

.spec a {
	
}
</style>
<script type="text/javascript"> 
   function   serach()      
  {  
  	var form = document.forms[0];
   	form.submit();
  } 
</script>
<head>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title></title>
	<LINK href="<%=basePath%>resources/css/stylesMonitor.css" type=text/css rel=stylesheet>
</head>
<body bgcolor="#E9E9E9" style="margin:10px 0px;" >
    <script type="text/javascript" src="<%=basePath%>resources/scripts/common.js"></script>
    <form name="form1" method="post" action="#" id="form1">
	<script type="text/javascript">
			var buttons=new Array();
			buttons[0]={Text:"",Tooltip:"",Icon:"",Handler:""};
			try{loadButtons(buttons);}catch(ex){}
			floatButtons="";
			try{top.frames["toolbar"].setCurrentPath("产品分类列表");}catch(e){};
			try{top.frames["statusBar"].setStatusMessage("");}catch(e){}
	</script>
	
    <div class="ContentContainer">
    <div id="divListContainer">
        <display:table size="total" partialList="true"  htmlId="tab"
							style="text-align: center" requestURI="/host/list"
							id="info" name="${pageView.records}" pagesize="${pageView.viewPageCount}" class="ListTable">
			<display:column title="序号"  style="width:3%">
			        &nbsp;&nbsp;${info_rowNum}&nbsp;&nbsp;
<!--    			<a href="toHost?id=${info.id}" target="_black">&nbsp;&nbsp;${info_rowNum}&nbsp;&nbsp;</a>-->
			</display:column>
			<display:column property="hostTypeName" title="服务器类型" sortable="true" />
			<display:column property="name" title="服务器名称" sortable="true" />
			<display:column property="ip" title="外网IP" sortable="true" />
			<display:column property="ipInNet" title="内网IP" sortable="true" />
			<display:column property="operatingSystem" title="操作系统" sortable="true" />
			<display:column  title="监控状态" sortable="true">
			     <c:if test="${info.status==0}">
			         <font color="#32b5ca">监控中</font>
			     </c:if>
			     <c:if test="${info.status==1}">
			         <font color="#aa0000">停止监控</font>
			     </c:if>
			</display:column>
			<display:column title="备注" sortable="true">
				<div class="spec" onmouseover='showDetail(this)' onmouseout="hideDetail()">
					${info.remark}
				</div>
			</display:column>
			<display:column title="操作" sortable="true" style="width:100px">
				<a href="toHost?id=${info.id}" style="text-decoration: none">&nbsp;&nbsp;<img alt="" src="<%=basePath%>/resources/images/monitorSystem/operation.png" >&nbsp;&nbsp;</a>
			</display:column>
		</display:table>
		</div>
		</div>
  <script type="text/javascript" src="<%=basePath%>resources/scripts/commonTable.js"></script>	
  <div id="detail"
		style="display: none; position: fixed; width: 200px; height: 200px; background-color: #edf0f6; padding: 5px; border: 2px solid #eee;word-break:break-all;">
  </div>
  
 <script type="text/javascript">
     var form1 = document.forms[0];
		function checkAll(tarCheck,checkName,tarElId){
			var checks = document.getElementsByName(checkName);
			for(var i=0;i<checks.length;i++){
				checks[i].checked = tarCheck.checked;
			}
			var tarEl = document.getElementById(tarElId);
			tarEl.innerText=tarCheck.checked?checks.length:0;
		}
		function selectedCount(checkObj,tarElId){
			
			var tarEl = document.getElementById(tarElId);
			var count = parseInt(tarEl.innerText);
			checkObj.checked = !checkObj.checked;
		}
		
// 	 function showDetail(tarDiv){
//     	var divObj = document.getElementById("detail");
//     	divObj.innerHTML=tarDiv.innerHTML;
//     	divObj.style.left=window.event.clientX;
//     	divObj.style.top = window.event.clientY;
//     	divObj.style.display="block";
//     }
// 	function hideDetail(){
// 		var divObj = document.getElementById("detail");
// 		divObj.style.display="none";
// 	}

   
	$(".spec,#detail").hover(function(ev){
		var tarDiv = this;
		var divObj = document.getElementById("detail");
    	divObj.innerHTML=tarDiv.innerHTML;
    	divObj.style.left=window.event.clientX;
    	divObj.style.top = window.event.clientY;
    	divObj.style.display="block";
	},function(ev){
		var divObj = document.getElementById("detail");
		divObj.style.display="none";
	});
    </script>
<div>
</div></form>
</body>
</html>